<template>
  <div>
    <!-- <div :class="dialogShow?'not-allow-rool':''"> -->
    <div class="shade" v-show="dialogShow" @click="toggle" @touchmove.prevent @scroll.prevent></div>
    <div class="content-container">
      <div class="content-card" v-for="(item,index) in contents" :key="index">
        <div class="card-top">
          <div class="title-bar">
            <div class="icon iconfont icon-wenjian"></div>
            <div class="title" v-text="item.title"></div>
          </div>
          <div class="check">已审核</div>
        </div>
        <div class="card-middle">
          <div class="contact" v-text="'乙方姓名：' + item.contact"></div>
          <div class="phone" v-text="'联系方式：'+item.phone"></div>
          <span class="price">租金：</span>
          <span class="value" v-text="'￥'+item.price+'元/月'"></span>
          <div class="time-text" v-text="'时间：' +item.time"></div>
        </div>
        <div class="card-bottom">
          <button class="signature">签名</button>
        </div>
      </div>
    </div>
    <div class="dialog-container">
      <transition name="dialog">
        <div v-show="dialogShow" class="dialog">
          <div
            v-for="(item,index) in options"
            :id="'option'+index"
            class="item"
            :key="index"
            @click="clickOption(item.text)"
          >
            <div :class="'icon iconfont '+item.icon"></div>
            <div class="text">{{item.text}}</div>
          </div>
        </div>
      </transition>
      <div class="circle iconfont icon-jiahao" @click="toggle"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'test',
  data() {
    return {
      options: [
        {
          icon: 'icon-shebeiguanli',
          text: '设备管理'
        },
        {
          icon: 'icon-icon_shezhi',
          text: '设置'
        },
        {
          icon: 'icon-yibiaopan',
          text: '仪表盘'
        },
        {
          icon: 'icon-zhanghaoquanxianguanli',
          text: '用户'
        }
      ],
      contents: [
        {
          pictureUrl: '/logo.png',
          title: '合同合同',
          content: '测试内容测试内容',
          contact: '李小姐',
          phone: '18000000000',
          time: '2019年4月5日',
          price: 4000
        },
        {
          pictureUrl: '/logo.png',
          title: '合同合同',
          content: '测试内容测试内容',
          contact: '李小姐',
          phone: '18000000000',
          time: '2019年4月5日',
          price: 4000
        },
        {
          pictureUrl: '/logo.png',
          title: '合同合同',
          content: '测试内容测试内容',
          contact: '李小姐',
          phone: '18000000000',
          time: '2019年4月5日',
          price: 4000
        },
        {
          pictureUrl: '/logo.png',
          title: '合同合同',
          content: '测试内容测试内容',
          contact: '李小姐',
          phone: '18000000000',
          time: '2019年4月5日',
          price: 4000
        },
        {
          pictureUrl: '/logo.png',
          title: '合同合同',
          content: '测试内容测试内容',
          contact: '李小姐',
          phone: '18000000000',
          time: '2019年4月5日',
          price: 4000
        },
        {
          pictureUrl: '/logo.png',
          title: '合同合同',
          content: '测试内容测试内容',
          contact: '李小姐',
          phone: '18000000000',
          time: '2019年4月5日',
          price: 4000
        },
        {
          pictureUrl: '/logo.png',
          title: '合同合同',
          content: '测试内容测试内容',
          contact: '李小姐',
          phone: '18000000000',
          time: '2019年4月5日',
          price: 4000
        },
        {
          pictureUrl: '/logo.png',
          title: '合同合同',
          content: '测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容',
          contact: '李小姐',
          phone: '18000000000',
          time: '2019年4月5日',
          price: 4000
        },
        {
          pictureUrl: '/logo.png',
          title: '合同合同',
          content: '测试内容测试内容',
          contact: '李小姐',
          phone: '18000000000',
          price: 4000
        },
        {
          pictureUrl: '/logo.png',
          title: '合同合同',
          content: '测试内容测试内容',
          contact: '李小姐',
          phone: '18000000000',
          price: 4000
        },
        {
          pictureUrl: '/logo.png',
          title: '合同合同',
          content: '测试内容测试内容',
          contact: '李小姐',
          phone: '18000000000',
          price: 4000
        },
        {
          pictureUrl: '/logo.png',
          title: '合同合同',
          content: '测试内容测试内容',
          contact: '李小姐',
          phone: '18000000000',
          price: 4000
        },
        {
          pictureUrl: '/logo.png',
          title: '合同合同',
          content: '测试内容测试内容',
          contact: '李小姐',
          phone: '18000000000',
          price: 4000
        }
      ],
      dialogShow: false,
      scrollTop: 0
    }
  },
  methods: {
    clickOption(name) {
      console.log('点击了:' + name + ' 按钮')
    },
    toggle() {
      this.dialogShow = !this.dialogShow
    }
  },
  mounted() {
    document.body.addEventListener('touchmove', function(e){
        e.preventDefault();
    }, { passive: !this.dialogShow });
    document.body.addEventListener('scroll', function(e){
        e.preventDefault();
    }, { passive: !this.dialogShow });
  }
}
</script>

<style scoped>
@import '~@/assets/phone/iconfont/iconfont.css';
.dialog-container {
  z-index: 999;
  position: fixed;
  bottom: 50px;
  right: 10px;
  width: 170px;
}
.circle {
  font-size: 30px;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border-radius: 50%;
  color: #fff;
  background-color: #e88;
  margin: 20px 0 0 50%;
  box-shadow: 2px 2px 4px rgba(30, 30, 30, 0.4);
}

.circle:active {
  bottom: 46px;
  width: 47px;
  height: 47px;
  font-size: 28px;
  box-shadow: 0px 0px 8px transparent;
}

.dialog {
  width: 170px;
  background-color: #fff;
  border-radius: 10px;
  border: 1px solid #eee;
  box-shadow: 2px 2px 4px rgba(30, 30, 30, 0.4);
  position: relative;
  bottom: 0px;
  right: 0px;
  padding: 10px 0;
}

.dialog .item {
  display: flex;
  align-items: center;
  height: 40px;
}
.dialog .icon {
  margin: 0 20px;
}
.dialog::after {
  content: '';
  border-width: 10px;
  border-style: solid;
  border-color: #fff #fff transparent transparent;
  position: absolute;
  transform: rotate(135deg);
  right: 50px;
  /* bottom: -30px; */
  box-shadow: 2px -2px 3px rgba(30, 30, 30, 0.2);
}

.item:active {
  background-color: skyblue;
  color: #fff;
}

.dialog-enter-active,
.dialog-leave-active {
  transition: all 0.5s;
}
.dialog-enter,
.dialog-leave-to {
  transform: scale(0.3);
  right: -15px;
  bottom: -70px;
  opacity: 0;
}

.content-card {
  /* height: 180px; */
  /* padding: 10px 20px; */
  border-bottom: 3px solid #eee;
  overflow: hidden;
}

.content-card .card-top {
  padding: 10px 20px;
  border-bottom: 1px solid #eee;
}

.content-card .icon {
  color: #68c;
  font-size: 18px;
}

.content-card .title-bar {
  height: 100%;
  width: 30vw;
  display: flex;
  font-size: 18px;
  font-weight: 600;
  justify-content: space-around;
  align-items: center;
}

.content-card .check {
  font-weight: 600;
  font-size: 15px;
  color: #e88;
}

.content-card .value {
  font-weight: 600;
  color: #e88;
}

.content-card .card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.content-card .card-middle {
  padding: 10px;
  font-size: 15px;
  border-bottom: 1px solid #eee;
}

.content-card .signature {
  height:30px;
  width: 100px;
  background-color: #68c;
  margin: 6px 20px 6px 0;
  box-shadow: 0px 0px 6px rgba(30, 30, 30, 0.6);
  color: #fff;
  text-align: center;
  line-height: 26px;
  border-radius: 10px;
  float: right;
  border: 0;
  outline: none;
}

.content-card .signature:active {
  box-shadow: 0px 0px 0px transparent;
}


.shade {
  z-index: 10;
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(30, 30, 30, 0.4);
}
</style>